<template>
  <div class="info" flex ww3 auto>
    <div class="info-l">
      <div flex-c class="upload-box"> 
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div class="upload-ava" pos-a>
            <img :src="user.avatar == '' ? photo : fileUrl + user.avatar" class="avatar" ww1 h-1 />
            
            <p pos-b center="" ww1 fz-14 grey-light>点击修改头像</p>
          </div>
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
        </el-upload>
        <div class="name-wrapper">
          <p class="tit" style="margin-left: 10px" fz-20  @click="checkPhone('nickname')">
            {{user.nickname}}
          </p>
          <dl style="margin-left: 10px;">
            <dt flex  ww1 fz-14 black>
              <el-tooltip class="item" effect="dark" content="充值余额">
                <p>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yue"></use>
                  </svg>
                  <i>{{user.remainingSum}}</i>
                </p>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="销售收入">
              <p style="margin-left: 20px;"> 
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-yue"></use>
                </svg>
                <i>{{user.income}}</i>
              </p>
              </el-tooltip>
            </dt>
          </dl>
        </div>
      </div>

      <div class="info-wap1" style="text-align: right; color: red;">
        <span style="cursor: pointer;" @click="onlineRecordList">在线记录（3）</span>
        <el-divider class="samll-der"></el-divider>
      </div>

      <div class="from-wap">  
        <el-form
          :label-position="labelPosition"
          label-width="50px"
          :model="formLabelAlign"
        >
          <el-form-item label="密码">
            <el-input placeholder="********" :disabled="true">
              <span slot="append" @click="checkPhone('pin')">绑定</span>
            </el-input>
          </el-form-item>

          <el-form-item label="手机">
            <el-input :placeholder="user.phonenumber.substr(0, 3) + '****' + user.phonenumber.substr(7)" :disabled="true">
              <span slot="append" @click="checkPhone('phonenumber')">更改</span>
            </el-input>
          </el-form-item>

          <el-form-item label="微信">
            <el-input :placeholder="user.wechat ? user.wechat : formLabelAlign.wx" :disabled="true">
              <span slot="append" @click="checkPhone('wechat')">更改</span>
            </el-input>
          </el-form-item>

          <el-form-item label="PIN码" class="el-flex">
            <el-switch
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="user.pinType == 0"
              :inactive-value="user.pinType == 1"
              @change="visible = true"
            >
            </el-switch>
            <span @click="checkPhone('pinPwd')" cur flex-w1>更改</span>
          </el-form-item>
        </el-form>
      </div>

      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>卖家实名认证（分成比例75%）</p>
        <!-- <svg class="icon" aria-hidden="true">
          <use
            xlink:href="#icon-tubiao-jichutubiao-yuanxingduihao-mianxing3x-copy"
          ></use>
        </svg> -->
        <span style="color: #888;">{{setAuthenticationStatus(user.authenticationStatus, cmsAuthentication.type)}}</span>
      </div>
      <el-divider class="samll-der"></el-divider>

      <div v-if="user.authenticationStatus === 3">
        <div v-if="cmsAuthentication.type == 2">
          <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">公司名称</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <p flex-w1>{{cmsAuthentication.companyName}}</p>
            </div>
          </div>

          <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">信用代码</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <p flex-w1>{{cmsAuthentication.succ}}</p>
            </div>
          </div>

          <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">所在地区</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <p flex-w1>{{cmsAuthentication.domicile}}</p>
            </div>
          </div>

          <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">账户状态</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <p flex-w1>{{cmsAuthentication.longTime == 1 ? '长期': '短期'}}</p>
            </div>
          </div>

          <!-- <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">店铺链接</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <a href="" target="_blank" blue="">
                {{cmsAuthentication.succ}}
              </a>
            </div>
          </div> -->
        </div>
        <div v-if="cmsAuthentication.type == 1">
          <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">真实姓名</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <p flex-w1>{{cmsAuthentication.userName}}</p>
            </div>
          </div>

          <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">身份证号</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <p flex-w1>{{cmsAuthentication.idCard}}</p>
            </div>
          </div>

          <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">所在地区</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <p flex-w1>{{cmsAuthentication.permanentAddress}}</p>
            </div>
          </div>

          <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 200px">是否通过第三方个人信息认证</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <p flex-w1>{{cmsAuthentication.longTime == 1 ? '是': '否'}}</p>
            </div>
          </div>

          <!-- <div class="el-form-item el-flex from-wap">
            <label class="el-form-item__label" style="width: 70px">店铺链接</label>
            <div class="el-form-item__content" style="margin-left: 70px">
              <a href="" target="_blank" blue="">
                {{cmsAuthentication.succ}}
              </a>
            </div>
          </div> -->
        </div>
      </div>

      <div class="edit-shop flex" flex-c  v-if="user.authenticationStatus != 3">
        <!-- <el-button type="primary" @click="dialogFormVisible = true"
          >编辑店铺简介</el-button
        > -->
        <el-button type="primary" @click="lookDialogFlag">查看认证授权</el-button> 
      </div>
    </div>
    <el-dialog
      title="请选择认证类别"
      :visible.sync="dialogFlag"
      class="show"
      width="800px"
      @close="dialogFlag = false"
    >
      <div
        ww1
        flex
        clum
        flex-c
        style="height: 100px; justify-content: space-around"
      >
        <div flex class="btns">
          <div v-if="!authenticationType || authenticationType == 1">
            <el-button type="primary" @click="goAuth('person')" plain style="padding: 12px 34px !important">
              个人认证
            </el-button>
            <span>当前分成比例为{{gr}}%</span>
          </div>
          <div v-if="!authenticationType || authenticationType == 2">
            <el-button type="primary" @click="goAuth('company')" plain style="padding: 12px 34px !important">
              企业认证
            </el-button>
            <span>当前分成比例为{{qy}}%</span>
          </div>
          <!-- <div>
            <el-button type="primary" @click="goAuth('official')" plain style="padding: 12px 34px !important">
              官方认证
            </el-button>
            <span>当前分成比例为75%</span>
          </div> -->
          
        </div>
      </div>
    </el-dialog>

    <div class="info-r">
      <div class="notice-tit" center fz-16>平台公告</div>

      <dl v-for="(item, index) in ggrEcords" :key="index" class="notice-wap" @click="noticeDetail(item)" flex flex-b fz-14>
        <dt>
          <span href="" target="_blank">{{item.title}}</span>
        </dt>
        <dd>
          <span href="" target="_blank">{{item.createTime}}</span>
        </dd>
      </dl>
    </div>

    <el-dialog
      title="编辑店铺简介"
      :visible.sync="dialogFormVisible"
      class="show"
      width="48%"
    >
      <el-input
        type="textarea"
        placeholder="本公司致力于原创素材制作拍摄，放心使用，但严禁转售，一经发现诉讼赔偿！ v13966770415"
        v-model="textarea"
        maxlength="100"
        show-word-limit
        :required="true"
        class="chara-form"
      >
      </el-input>

      <div ww1 flex style="justify-content: center; margin-top: 20px">
        <el-button type="primary" style="padding: 12px 70px !important"
          >提交</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :title="!phone ? '账号验证' : '手机验证'"
      :visible.sync="visible"
      class="show"
      width="40%"
      @closed="close"
    >
      <template v-if="!phone">
        <p fz-14="" center>为保护您的账号安全，请先完成账号验证</p>

        <div flex flex-c style="justify-content: center; padding-top: 16px">
          <el-button
            :type="disabled ? 'info' : 'primary'"
            style="padding: 12px 10px !important"
            @click="changeType"
            >手机验证({{user.phonenumber.substr(0, 3) + '****' + user.phonenumber.substr(7)}})</el-button
          >
          <!-- <el-button type="info" style="padding: 12px 50px !important" disabled
            >QQ验证</el-button
          > -->
          <el-button type="info" style="padding: 12px 50px !important" disabled
            >微信验证</el-button
          >
        </div>

        <div center style="padding: 20px 0">
          <el-button
            :type="disabled ? 'info' : 'primary'"
            style="padding: 12px 60px !important"
            :disabled="disabled"
            @click="phone = true"
          >
            去验证
          </el-button>
        </div>
      </template>

      <template v-if="phone">
        <!--        <p fz-14="" center>验证码已发送至 159*****214，10分钟内有效</p>-->
        <p fz-14="" center>发送验证码至{{user.phonenumber.substr(0, 3) + '****' + user.phonenumber.substr(7)}}，1分钟内有效</p>

        <div flex just-center class="dia-wap">
          <el-input
            placeholder="请输入验证码"
            v-model="yzm"
            style="width: 80%"
          >
            <template slot="append"> <span @click="getYzm">{{yzmText}}</span></template>
          </el-input>
        </div>
        <div class="tj-btn">
          <el-button type="primary" @click="gotoLogin">提交</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      :title="setTitle()"  
      :visible.sync="showModify"
      class="show"
      width="40%"
    >
      <div v-if="modifyType == 'nickname'" flex just-center clum flex-c class="dia-wap">
        <el-input
          placeholder="请输入用户名"
          v-model="modifyVal"
          style="width: 80%"
        >
          <template slot="append"> <span @click="updateUserInfo">确定</span></template>
        </el-input>
      </div>
      <div v-if="modifyType == 'qq'" flex just-center clum flex-c class="dia-wap">
        <el-input
          placeholder="请输入QQ号"
          v-model="modifyVal"
          style="width: 80%"
        >
          <template slot="append"> <span @click="updateUserInfo">确定</span></template>
        </el-input>
      </div>
       <div v-if="modifyType == 'pinPwd'" flex just-center clum flex-c class="dia-wap">
        <el-input
          placeholder="请输入PIN码"
          v-model="modifyVal"
          style="width: 80%"
        >
          <template slot="append"> <span @click="updateUserInfo">确定</span></template>
        </el-input>
      </div>
      <div v-if="modifyType == 'phonenumber'" flex just-center clum flex-c class="dia-wap">
        <el-input
          placeholder="请输入新手机号"
          v-model="modifyVal"
          style="width: 80%"
        >
          <template slot="append"> <span @click="updateUserInfo">确定</span></template>
        </el-input>
      </div>
      <div v-if="modifyType == 'wechat'" flex just-center clum flex-c class="dia-wap">
        <el-input
          placeholder="请输入微信号"
          v-model="modifyVal"
          style="width: 80%"
        >
          <template slot="append"> <span @click="updateUserInfo">确定</span></template>
        </el-input>
      </div>
      <div v-if="modifyType == 'pin'" flex just-center clum flex-c class="dia-wap modifyPin">
        <el-input
          placeholder="请输入新密码"
          v-model="modifyPin1"
          style="width: 80%"
        >
        </el-input>
        <el-input
          placeholder="再输入新密码"
          v-model="modifyPin2"
          style="width: 80%"
        >
        </el-input>
        <div class="tj-btn">
          <el-button type="primary" @click="updateUserInfoPin">确定</el-button> 
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="微信验证"
      :visible.sync="visible2"
      class="show"
      width="40%"
    >
      <div flex just-center clum flex-c class="dia-wap">
        <p fz-14 grey style="padding-bottom: 12px">
          请使用已绑定微信扫描下方二维码完成验证
        </p>

        <img src="@/assets/code.png" width="208" height="208" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $http from "@/api/info/info"
import $httpLogin from "@/api/login/login"
export default {
  name: "Info",
  data() {
    return {
      photo: require("@/assets/photo.png"),
      uploadUrl: this.$url.uploadUrl,
      fileUrl: this.$url.fileUrl,
      authenticationType: "",
      yzm: '',
      ggrEcords: [],
      url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F6a%2F51%2F24%2F6a512471795e0824472d6c85cf22bdb2.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638627584&t=e1b7bf0b3bc1315b72f5a3421077d905",
      value: true,
      dialogFlag: false,
      dialogFormVisible: false,
      textarea: "",

      visible: false, //绑定
      disabled: true,
      phone: false,

      labelPosition: "right",
      formLabelAlign: {
        qq: "未绑定，绑定后获得更佳体验",
        phone: "159****3214",
        wx: "未绑定，绑定后获得更佳体验",
        pin: false,
      },
      visible2: false,
      user: {},
      cmsAuthentication: {},
      obtainYzm: true,
      yzmText: '获取验证码',
      showModify: false,
      modifyVal: '', 
      modifyType: 'wechat',//qq
      modifyPin1: '',
      modifyPin2: '',
      gr: 0,
      qy: 0
    };
  },
  mounted() {
    this.getCmsInform();
    this.getUserInfo1();
    this.setListBl();
  },
  methods: {
    /**
     * 获取用户信息
     */
    getUserInfo1() {
      let that = this;
      let data = {
        phone: sessionStorage.getItem('userId')
      };
      debugger;
      $httpLogin.getUserInfo(data).then(res => {
        that.user = res.data.sysUser;
        that.cmsAuthentication = res.data.cmsAuthentication == null ? {} : res.data.cmsAuthentication;
        console.log("this.cmsAuthentication", this.cmsAuthentication);
      })
    },
    /**
     * 弹出编辑认证按钮
     */
    lookDialogFlag() {
      this.dialogFlag = true;
      this.authenticationType = this.cmsAuthentication.type;
    }, 
    /**
     * 编译企业认证状态
     */
    setAuthenticationStatus(type, cmsType) {
      let name = "";
      let returnName = "";
      switch(type) {
        case 1:
          name = "待审核"
          break;
        case 2:
          name = "审核中"
          break;
        case 3:
          name = "已认证"
          break;
        default:
          name = "审核未过"
          break;
      }
      if(!cmsType) {
        returnName = "未认证"
      } else if(cmsType == 1) {
        returnName = '个人认证' + name;
      } else if (cmsType == 2) {
        returnName = '企业认证' + name;
      }
      return returnName;
    },
    /**
     * 重置密码
     */
    updateUserInfoPin() {
      let that = this;
      if(this.modifyPin1 !== this.modifyPin2) {
        this.$message('重置密码二次输入要一致');
        return;
      }
      let data = {
        "phonenumber": this.user.phonenumber,
        "newPassword": this.modifyPin1,
        "pinType": 1
      };
      $httpLogin.updateByPin(data).then((res) => {
        console.log(data);
        that.getUserInfo(that.user.userId);
      })
    }, 
    /**
     * 获取用户信息
     */
    getUserInfo(phone) {
        let that = this;
        let data = {
            phone: phone
        }
        $httpLogin.getUserInfo(data).then((res) => {
            console.log("获取用户信息",res);
            if(res.code == 0) {
              sessionStorage.setItem("user", JSON.stringify(res.data));
              that.user = res.data.sysUser;
              that.showModify = false;
              that.$message({
                  message: '修改成功',
                  type: 'success'
              });
            }
            
        })
    },
    /**
     * 修改用户信息
     */
    updateUserInfo() {
      let that = this;
      let data = {
        userId: sessionStorage.getItem("userId")
      };
      data[this.modifyType] = this.modifyVal;
      $httpLogin.updateUserInfo(data).then((res) => {
        console.log(res);
        if(this.modifyType === 'phonenumber') {
          this.user.phonenumber = this.modifyVal;
        }
        that.getUserInfo(this.user.userId);
      })
    },
    /**
     * 获取比例
     */
    setListBl() {
      $http.setListBl().then(res => {
        console.log('获取比例',res);
        res.data.forEach(item => {
          if(item.setStatus == 1) {
            this.gr = item.proportion
          } else {
            this.qy = item.proportion
          }
        })
      })
    },
    /**
     * 获取公告列表
     */
    getCmsInform() {
      let that = this;
      let data = {
        pageNum: 1,
        pageSize: 10
      };
      this.$http({
          url: that.$url.baseUrl + "/cmsInform/page?pageSize=10&pageNum=1",
          method: "get"
      }).then((res) => {
        that.ggrEcords = res.data.rows;
        that.total = res.data.total;
        console.log(that.list);
      })
    },
    /**
     * 获取验证码
     */
    getYzm() {
        let that = this;
        if(!this.obtainYzm) {
            return;
        }
        let data = {
            phone: this.user.phonenumber
        };
        $httpLogin.getYzm(data).then((res) => {
            console.log(res);
            that.yzm = '';
            that.obtainYzm = false;
            that.countDownFun();
        })
    },
    /**
     * 短信登录
     */
    gotoLogin() {
        let that = this;
        let data = {
            phonenumber: this.user.phonenumber,
            code: this.yzm,
        };
        $httpLogin.modifyGetYzm(data).then((res) => {
            if(res.code == 0) {
              that.visible = false;
              that.showModify = true;

            }
        })
    },
    /**
     * 验证码接口完成，开始倒计时
     */
    countDownFun() {
        this.yzmText = "60s后在获取";
        let num = 60;
        let index = setInterval(() => {
            num = num - 1;
            this.yzmText = num + "s后在获取";
            if(num == 0) {
                this.yzmText = '获取验证码';
                this.obtainYzm = true;
                window.clearInterval(index);
                
            }
        }, 1000)
    },
    // 验证页面跳转
    goAuth(type) {
      if(type == 'person') {
        this.$router.push('/account/personalAuth')
      } else if (type == 'company') {
        this.$router.push('/account/companyAuth')
      } else if(type == 'official') {
        this.$router.push('/account/companyOfficial')
      }
    },
    // 公告详情跳转
    noticeDetail(item) {
      // sessionStorage.setItem("cmsInformContent", JSON.stringify(item));
      this.$router.push(`/account/noticeDetail/${item.informId}`);
    },
    //点击在线记录按钮事件
    onlineRecordList() {
      this.$router.push("/account/onlineRecord");
    },
    handleAvatarSuccess(res) {
      console.log(res);
      this.modifyVal = res.fileName;
      this.modifyType  = 'avatar';
      this.updateUserInfo();

    },
    beforeAvatarUpload() {},
    diaQQ() {},

    changeType() {
      this.disabled = false;
    },

    checkPhone(type) {
      this.modifyType = type;
      switch(type) {
        case "qq":
        case "pin":
        case "nickname":
        case "pinPwd":
        case "wechat":
          this.visible = true;
          break;
        case "phonenumber":
          this.visible = true;
          this.phone = true;
          break;  
        default:
          this.visible2 = true;  
      }
    },
    /**
     * 设置修改信息标题
     */
    setTitle() {
      let returnTit= "";
      switch(this.modifyType) {
        case 'nickname':
          returnTit = "用户名修改";
          break;
        case 'qq':
          returnTit = "QQ修改";
          break;
        case 'phonenumber':
          returnTit = "手机号修改";
          break;
        case 'pin':
          returnTit = "密码修改";
          break;
      }   
      return returnTit;  
    },
    changeSwitch(e) {
      this.checkPhone();
      e.preventDefault();
    },
    close() {
      this.phone = false;
      this.disabled = true;
    },
  },
};
</script>

<style scoped>
.modifyPin >>> .el-input {
  margin-bottom: 10px;
}
.from-wap >>> .el-input__inner,
.from-wap >>> .el-input-group__append, 
.from-wap >>>.el-input-group__prepend {
  border: 0;
}
.tj-btn {
  text-align: center;
  margin-bottom: 10px;
}
#app .el-button--primary {
  padding: 2% 100px;
  /* margin-left: 100px; */
}
#app .tj-btn .el-button--primary {
  padding: 2% 30px;
}
#app .modifyPin .tj-btn .el-button--primary {
  padding: 10px 30px;
}
.from-wap >>> .el-input {
  border: 1px solid #fff;
}
.edit-shop >>> .el-button--primary {
  font-size: 14px;
  margin-right: 14px;
}

.info-l {
  flex: 1;
  margin-right: 12%;
}
.name-wrapper {
  margin-left: 10px;
}
.name-wrapper, 
.avatar-uploader {
  display: inline-block;
  vertical-align: top;
}

/* .info-l>div {
  display: inline-block;
  vertical-align: top;
} */

.from-wap >>> .el-form-item {
  margin-bottom: 15px;
}

.upload-ava {
  height: 80px;
  width: 88px;
  border: 1px solid #f0f0f0;
}
.upload-ava p {
  bottom: 22px;
  font-size: 13px;
  left: 0;
}

.tit i {
}

.tit {
  margin: 14px 0;
  height: 20px;
}

.upload-box {
  margin-bottom: 20px;
}

/* .info-wap1 {
  margin-left: 1%;
} */
.info-wap1 dl dt i {
  padding-left: 10px;
}
.info-wap1 dl dt p {
}

.info-wap1 dd p,
.switch,
.edit-shop {
  padding-top: 10px;
}
.info-wap1 dd p i {
  color: var(--nav-color);
  font-size: 14px;
}
.info-wap1 dd p i:hover {
  color: var(--green);
}

.info-wap1 dd p,
.switch {
  color: var(--grey);
  font-size: var(--content);
}

.info-wap1 dd b {
  color: #a7a7a7;
}
.wap >>> .el-step__title.is-wait {
  font-size: 14px;
}

.switch i {
  color: #0c8be3;
  padding-left: 4px;
}

.check-bank .icon {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  margin-right: 4px;
}

.from-wap >>> .el-form-item__label {
  color: var(--grey);
  text-align: left;
}
.el-form-item__content,
.from-wap >>> .el-input.is-disabled .el-input__inner {
  color: var(--nav-color);
}

.from-wap >>> .el-input.is-disabled .el-input__inner {
  border-right: none;
}
.from-wap >>> .el-input-group__append,
.from-wap >>> .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  font-size: var(--content);
}

.from-wap >>> .el-input-group__append {
  color: var(--color-black);
  border-left: none !important;
  cursor: pointer;
}

.info {
  align-items: start;
}
.info-r {
  width: 35%;
  flex: 0 0 35%;
  background: #fff;
  padding: 0 3%;
  border-radius: 4px;
  background: var(--message-color);
  min-height: 70vh;
}
.notice-tit {
  border-bottom: 1px solid #dcdfe6;
  padding-bottom: 6px;
  margin: 2.6% 0 6% 0;
}
.notice-wap {
  padding-bottom: 12px;
  cursor: pointer;
}

.notice-wap span {
  color: var(--grey);
  overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}

.notice-wap dt span {
  width: 100%;
  display: inline-block;
}
.notice-wap:hover span {
  color: #000000;
}
.notice-wap dt {
  flex: 0 0 60%;
  width: 60%;
}
.el-flex >>> .el-form-item__content {
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 0 20px;
  height: 40px;
}

.el-flex span {
  text-align: right;
}

.btns >>> .el-button--primary.is-plain {
  color: #fff;
}
.btns>div {
  display: inline-block;
  margin: 0 30px;
}
.btns>div span {
  display: block;
  text-align: right;
  margin-top: 5px;
}
</style>
